<template>
  <div class="">
    <!-- default的slot，只能有一个 -->
    <div>
      <slot></slot>
    </div>
    <ul class="nav-page">
      <li v-for="(obj, index) in pageNav" :key="index">
        <div>
          <a :href="obj.url">{{ obj.navName }} </a>
        </div>
      </li>
    </ul>
    <!--具名插槽-->
    <div>
      <!--先在slot上，绑定props,-->
      <slot name="right" v-bind:mytitle="title" :html="html"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "PageNavLayer",
  data() {
    return {
      title: "权限管理",
      html: "我是副标题",
    };
  },
  props: ["pageNav"],
};
</script>

<style>
.nav-page {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.nav-page > li {
  font-size: 1.6rem;
  margin-left: 10px;
  margin-right: 10px;
}
.nav-page > li:after {
  content: "/";
  display: inline-block;
  position: absolute;
  right: -10px;
  top: 0;
}
.nav-page a:link,
.nav-page a:visited,
.nav-page a:hover,
.nav-page a:active {
  color: greenyellow;
  text-decoration: none;
}
.nav-page > li:last-child a:visited,
.nav-page > li:last-child a:hover,
.nav-page > li:last-child a:active {
  color: gray;
}
.nav-page-style {
  width: 10px;
  height: 5px;
  float: left;
}
.bg-orange {
  background-color: orange;
}
.bg-green {
  background-color: green;
}
.bg-black {
  background-color: black;
}
.page-nav-box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
</style>